{% load static %}
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Login | 登录</title>
    <link href="{% static 'bootstrap/css/bootstrap.css' %}" rel="stylesheet">
    <style>
        html,
        body {
          height: 100%;
        }
        
        .form-signin {
          max-width: 330px;
          padding: 1rem;
        }
        
        .form-signin .form-floating:focus-within {
          z-index: 2;
        }
        
        .form-signin input[type="email"] {
          margin-bottom: -1px;
          border-bottom-right-radius: 0;
          border-bottom-left-radius: 0;
        }
        
        .form-signin input[type="password"] {
          margin-bottom: 10px;
          border-top-left-radius: 0;
          border-top-right-radius: 0;
        }

    </style>
</head>
<body class="d-flex align-items-center py-4 bg-body-tertiary vh-100">
<main class="form-signin w-100 m-auto">
  <form action="/signin/" method="post">
    <h1 class="h3 mb-3 fw-normal">请登录系统</h1>
      {% csrf_token %}

    <div class="form-floating">
      <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
      <label for="floatingInput">邮件</label>
    </div>
    <div class="form-floating">
      <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
      <label for="floatingPassword">密码</label>
    </div>

    <div class="form-check text-start my-3">
      <input class="form-check-input" type="checkbox" value="remember-me" id="flexCheckDefault">
      <label class="form-check-label" for="flexCheckDefault">
        记住我
      </label>
    </div>
    <button class="btn btn-primary w-100 py-2" type="submit">登 录</button>
  </form>
</main>

{# 引入 javascript #}
<script src="{% static 'bootstrap/js/bootstrap.bundle.js' %}"></script>
</body>
</html>